<template>
  <div class="footer-container">
    <div class="footer-left">
      会议时长 {{meetingDuration}}
    </div>
    <div class="footer-right">
      <el-button type="info" @click="showAttendees">参会人员({{ attendeesList.length }})</el-button>
      <el-button type="primary" @click="showInviteList">邀请</el-button>
      <el-button type="danger">退出会议</el-button>
    </div>
  </div>

  <el-drawer
    v-model="drawerVisible"
    :title="drawerTitle"
    direction="rtl"
    size="300px"
  >
    <div v-if="drawerMode === 'attendees'" class="drawer-content">
      <h4>参会人员 ({{ attendeesList.length }})</h4>
      <ul class="user-list">
        <li v-for="user in attendeesList" :key="user.id" class="user-item">
          <span :class="['status-dot', user.online ? 'online' : 'offline']"></span>
          <span>{{ user.name }}</span>
          <el-button
            size="small"
            type="danger"
            plain
            @click="kickUser(user)"
          >
            踢出
          </el-button>
        </li>
      </ul>
    </div>

    <div v-if="drawerMode === 'invite'" class="drawer-content">
      <h4>可邀请人员 ({{ invitableList.length }})</h4>
      <ul class="user-list">
        <li v-for="user in invitableList" :key="user.id" class="user-item">
          <span :class="['status-dot', user.online ? 'online' : 'offline']"></span>
          <span>{{ user.name }}</span>
          <el-button
            size="small"
            type="primary"
            :disabled="!user.online"
            @click="inviteUser(user)"
          >
            邀请
          </el-button>
        </li>
      </ul>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
// import './FooterContainer.css';

const drawerVisible = ref(false);
const drawerMode = ref(''); 
const elapsedSeconds = ref(0);
let timer = null;

const meetingDuration = computed(() => {
  const hours = Math.floor(elapsedSeconds.value / 3600);
  const minutes = Math.floor((elapsedSeconds.value % 3600) / 60);
  const seconds = elapsedSeconds.value % 60;

  const format = (num) => num.toString().padStart(2, '0');

  return `${format(hours)}:${format(minutes)}:${format(seconds)}`;
});

onMounted(() => {
  timer = setInterval(() => {
    elapsedSeconds.value++;
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const users = ref([
  { id: 1, name: '张文清', online: true, inMeeting: true },
  { id: 2, name: '王医生', online: true, inMeeting: true },
  { id: 3, name: '李护士', online: false, inMeeting: true },
  { id: 4, name: '周大', online: true, inMeeting: true },
  { id: 5, name: '吴二', online: true, inMeeting: true },
  { id: 6, name: '郑三', online: true, inMeeting: true },
  { id: 7, name: '王四', online: true, inMeeting: true },
  { id: 8, name: '赵主任', online: true, inMeeting: false },
  { id: 9, name: '钱院长', online: false, inMeeting: false },
  { id: 10, name: '周院长', online: false, inMeeting: false },
  { id: 11, name: '孙五', online: true, inMeeting: false },
  { id: 12, name: '李六', online: true, inMeeting: false },
  { id: 13, name: '冯七', online: true, inMeeting: false },
  { id: 14, name: '陈八', online: true, inMeeting: false },
  { id: 15, name: '王九', online: true, inMeeting: false },
  { id: 16, name: '赵十', online: true, inMeeting: false },
]);

const drawerTitle = computed(() => {
  return drawerMode.value === 'attendees' ? '参会人员管理' : '邀请人员';
});

// 参会人员列表
const attendeesList = computed(() => {
  return users.value.filter(u => u.inMeeting);
});

// 可邀请人员列表
const invitableList = computed(() => {
  return users.value.filter(u => !u.inMeeting);
});

// 显示参会人员界面
const showAttendees = () => {
  drawerMode.value = 'attendees';
  drawerVisible.value = true;
};

// 显示邀请界面
const showInviteList = () => {
  drawerMode.value = 'invite';
  drawerVisible.value = true;
};

// 踢出用户
const kickUser = (userToKick) => {
  const user = users.value.find(u => u.id === userToKick.id);
  if (user) {
    user.inMeeting = false;
    ElMessage({
      message: `已将 ${user.name} 踢出会议`,
      type: 'warning',
    });
  }
};

// 邀请用户
const inviteUser = (userToInvite) => {
  const user = users.value.find(u => u.id === userToInvite.id);
  if (user) {
    user.inMeeting = true;
    ElMessage({
      message: `已成功邀请 ${user.name} 加入会议`,
      type: 'success',
    });
  }
};
</script>

<style scoped src="./FooterContainer.css"></style>